import React, { useState, useEffect } from 'react';
import './centre.less';
import request from 'umi-request';
import { Switch, Tree, Button, Input, message } from 'antd';
import {
  CarryOutOutlined,
  CheckOutlined,
  FormOutlined,
  MehOutlined,
} from '@ant-design/icons';
import { Resizable } from 'react-resizable';
import { Table } from 'antd';
import { history } from 'umi';
import {
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
export default function Index() {
  const treeData = [
    {
      title: '档案中心',
      key: '0-0',
      children: [
        {
          title: '人事制度',
          key: '0-0-1',
          icon: <MehOutlined />,
        },
        {
          title: '营销制度',
          key: '0-0-2',
          icon: <MehOutlined />,
        },
        {
          title: '产品资料',
          key: '0-0-3',
          icon: <MehOutlined />,
        },
        {
          title: '工作笔记',
          key: '0-0-4',
          icon: <MehOutlined />,
        },
      ],
    },
  ];
  const [showLine, setShowLine] = useState(true);
  const [showIcon, setShowIcon] = useState(false);
  const [showLeafIcon, setShowLeafIcon] = useState(true);
  const [datacount, setdatacount] = useState();
  const onSelect = (selectedKeys, info) => {
    request('/api/hqh/centre?nameselelct=' + info.node.name).then((res) => {
      setApplys(res.data);
      setdatacount(res.datacount);
    });
  };
  // 表格
  const [apply, setApplys] = useState([]); //  总数据渲染
  const [acolumns, setAcolumns] = useState([
    {
      title: '',
      key: '_id',
      width: 40,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '所属类别',
      key: 'nameselect',
      width: 100,
      dataIndex: 'nameselect',
      ellipsis: true,
    },
    {
      title: '文档名称',
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      width: 200,
    },
    {
      title: '上传人员',
      dataIndex: 'personnel',
      key: 'personnel',
      ellipsis: true,
      width: 100,
    },
    {
      title: '上传时间',
      dataIndex: 'shangchuang',
      key: 'shangchuang',
      ellipsis: true,
      width: 100,
    },
    {
      title: '',
      dataIndex: 'prodepartment',
      key: 'prodepartment',
      ellipsis: true,
      width: 100,
      render: (text, record, index) => (
        <span style={{ textDecoration: 'underline', color: 'blue' }}>查看</span>
      ),
    },
    {
      title: '',
      dataIndex: 'daname',
      key: 'daname',
      ellipsis: true,
      width: 100,
      render: (text, record, index) => (
        <span style={{ textDecoration: 'underline', color: 'blue' }}>下载</span>
      ),
    },
  ]);
  const [components, setComponents] = useState({});
  const [mYprofileshus, setmYprofileshus] = useState([]);

  useEffect(() => {
    request('/api/hqh/mYprofileshu').then((res) => {
      setmYprofileshus(res.data);
    });
    request('/api/hqh/centre').then((res) => {
      setApplys(res.data);
      setdatacount(res.datacount);
    });
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props: any) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index: any) =>
    (e: any, { size }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setAcolumns(nextColumns);
    };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const [seachName, setseachName] = useState();
  return (
    <div className="mymane">
      <div className="myname_left">
        <Tree
          showLine={showLeafIcon}
          showIcon={showIcon}
          onSelect={onSelect}
          fieldNames={{
            title: 'name',
            key: '_id',
            children: 'name_id',
          }}
          treeData={mYprofileshus}
        />
      </div>
      <div className="myname_right">
        <div className="buttondata">
          <Button
            onClick={() => {
              history.push('/datum/add');
            }}
          >
            新增
          </Button>
          <Button
            onClick={() => {
              if (selectedRowKeys.length > 0) {
                console.log(selectedRowKeys);
                localStorage.setItem('datum_id', selectedRowKeys[0]);
                history.push('/datum/update');
              } else {
                message.error('请选择修改人员');
              }
            }}
          >
            修改{' '}
          </Button>
          <Button
            onClick={() => {
              if (selectedRowKeys.length > 0) {
                selectedRowKeys.map((item) => {
                  request
                    .delete('http://localhost:8597/hqh/centre?id=' + item)
                    .then((val) => {
                      request('/api/hqh/centre').then((res) => {
                        setApplys(res.data);
                      });
                    });
                });
                message.success('删除成功');
              } else {
                message.error('删除失败,请选择删除内容');
              }
            }}
          >
            删除
          </Button>
          <Button style={{ marginRight: '40px' }}>移动</Button>
          名称:
          <Input
            onChange={(e) => {
              setseachName(e.target.value);
            }}
            style={{
              marginLeft: '10px',
              width: '100px',
              backgroundColor: '#fff',
              borderRadius: '5px',
              height: '30px',
              lineHeight: '30px',
            }}
          />
          <Button
            onClick={() => {
              request('/api/hqh/centre?name=' + seachName).then((res) => {
                setApplys(res.data);
                setdatacount(res.datacount);
              });
            }}
          >
            查询
          </Button>
          <Button>日志</Button>
        </div>
        <div className="myname_table">
          <Table
            components={components}
            columns={columns}
            pagination={false}
            bordered
            rowKey="_id"
            scroll={{
              x: 1000,
              y: 209,
            }}
            rowSelection={rowSelection}
            onRow={(record, index) => {
              return {
                onClick: (e) => {
                  let tr = e.target.parentNode;
                  for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                    tr.parentNode.childNodes[i].style.color = 'black';
                  }
                  tr.style.color = '#e17009';
                },
              };
            }}
            dataSource={apply}
          />
          <div className="alpplybottom">
            <span className="iconfont icon-xiangzuoshuangjiantou"></span>
            <span className="iconfont icon-xiangzuojiantou"></span>
            <span className="iconfont icon-vertical_line"></span>
            第
            <Input value={1} />
            页，共1页
            <span className="iconfont icon-vertical_line"></span>
            <span className="iconfont icon-xiangyoujiantou"></span>
            <span className="iconfont icon-xiangyoushuangjiantou"></span>
            <span className="iconfont icon-vertical_line"></span>
            每页记录数：
            <Input value={50} />
            <Button className="myname_but_1">确定</Button>
            <span style={{ display: 'inline-block', marginLeft: '420px' }}>
              显示{1}-{datacount}条,共{datacount}条
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
